let url = window.location.href

function parseQuery(url) {
    var queryObj = {};
    var reg = /[?&]([^=&#]+)=([^&#]*)/g;
    var querys = url.match(reg);
    if (querys) {
        for (var i in querys) {
            var query = querys[i].split('=');
            var key = query[0].substr(1),
                value = query[1];
            queryObj[key] ? queryObj[key] = [].concat(queryObj[key], value) : queryObj[key] = value;
        }
    }
    return queryObj;
}

let id = parseQuery(url).categoryid
console.log(id);

/* 请求导航栏数据 */

ajax({
    url: 'http://chst.vip:1234/api/getcategorybyid?categoryid=' + id
}).then(res => {
    res = res.result[0]
        /* console.log(res); */


    let left = document.querySelector('.left')
        /* console.log(left); */
    let a = document.createElement('a')
    a.innerHTML = `${res.category}&gt;`
    a.style.color = 'gray'
    left.appendChild(a)
        /* 请求商品列表数据 */
    ajax({
        url: 'http://chst.vip:1234/api/getproductlist?categoryid=' + res.categoryId
    }).then(res => {

        let arr = res.result;
        let show = document.querySelector('.show')
        show.innerHTML = create(arr)

        return res
    }).then(res => {
        let page = Math.ceil(res.totalCount / 10) //处理完成的页数
        let count = 1;
        let id = res.result[0].categoryId
        let pags = document.querySelector('.pages') //下拉菜单

        /* for循环翻页渲染数据 */
        for (let i = 1; i <= page; i++) {
            let count = i;
            let option = document.createElement('option');
            option.innerHTML = `${count}/${page}`
            option.className = 'option'
            pags.appendChild(option)
        }

        /* 给下拉菜单的父元素绑定事件获取到他的索引 */
        pags.onchange = function() {
            /* console.log(this.selectedIndex); */
            ajax({
                url: `http://chst.vip:1234/api/getproductlist?categoryid=${id}&pageid=${this.selectedIndex+1}`
            }).then(res => {
                let arr = res.result;
                let show = document.querySelector('.show')
                show.innerHTML = create(arr)
            })


        }
    })


    let select = document.querySelector('select')

    select.selectedIndex = select.selectedIndex

    let btnT = document.querySelector('.but-top')
    let btnB = document.querySelector('.btn-bottom')
        /* 上一页事件 */
    btnT.onclick = function() {

        btnB.disabled = false


        if (select.selectedIndex < 1) {

            btnT.disabled = true
            return
        }
        select.selectedIndex--
            /* console.log(select.selectedIndex + 1); */
            ajax({
                url: `http://chst.vip:1234/api/getproductlist?categoryid=${id}&pageid=${select.selectedIndex+1}`
            }).then(res => {
                let arr = res.result;
                let show = document.querySelector('.show')
                show.innerHTML = create(arr)
            })
    }

    let page = Math.ceil(res.totalCount / 10)

    /* 下一页事件 */
    btnB.onclick = function() {

        btnT.disabled = false

        if (select.selectedIndex >= page - 1) {

            btnB.disabled = true
            return
        }
        select.selectedIndex++
            /*   console.log(select.selectedIndex + 1); */
            ajax({
                url: `http://chst.vip:1234/api/getproductlist?categoryid=${id}&pageid=${select.selectedIndex+1}`
            }).then(res => {
                let arr = res.result;
                console.log(res);
                let show = document.querySelector('.show')
                show.innerHTML = create(arr)
            })
    }


})





/* 数据渲染页面函数 */
function create(arr) {
    let html = ""
    arr.forEach(item => {

        html += `<li>
                        <a href="productlist.html?categoryid=${item.productId}">
                            <div class='left'>${item.productImg}</div>
                            <div class="right">
                                <div class="top">
                                    <p>${item.productName}</p>
                                    <span>${item.productPrice}</span>
                                </div>
                                <div class="bottom">
                                    <span>${item.productQuote}</span>
                                    <span class="iconfont icon-xiaoxi" style="padding-left:.4rem ;">${item.productCom}</span>
                                </div>
                            </div>
                        </a>
                    </li>`
    });
    return html
}








/* 下拉菜单点击事件 */